<template>
    <div class="pad5">
        <mu-paper :z-depth="3">
            <div class="flrc pad5">
                <div class=" fwb padl10">{{title}}管理</div>
                <div class="padl10 flex1">
                    <mu-button class="mar1" color="primary" @click="openEdit">
                        <mu-icon left value="add"></mu-icon>
                        新增
                    </mu-button>
                    <mu-button class="mar1" color="primary" @click="refresh">
                        <mu-icon left value="refresh"></mu-icon>
                        刷新
                    </mu-button>
                    <mu-button class="mar1" color="primary" @click="copy">
                        <mu-icon left value="add_to_photos"></mu-icon>
                        复制
                    </mu-button>
                    <mu-button class="mar1 c11" color="warning" @click="removeAll">
                        <mu-icon left value="close"></mu-icon>
                        删除
                    </mu-button>
                    <mu-button class="mar1" color="primary" @click="expand">
                        <mu-icon left value="format_align_center"></mu-icon>
                        展开
                    </mu-button>
                    <mu-button class="mar1" color="primary" @click="shrink">
                        <mu-icon left value="drag_handle"></mu-icon>
                        收起
                    </mu-button>
                </div>
            </div>
        </mu-paper>
        <div class="mart5">
            <mu-paper class="pad5" :z-depth="3">
                <div class="">
                    <mu-data-table height="700" selectable checkbox select-all stripe :selects.sync="selected" :columns="headers"
                                   :data="data" rowKey="id" :key="tableKey">
                        <template slot-scope="scope">
                            <td :align="col.align" v-for="col in headers" :key="`${scope.row.id}${col.name}`">
                                <div :class="`ez-${col.align}`" v-if="col.name === 'id'">{{scope.row.id}}</div>
                                <div class="" :class="`ez-${col.align}`" v-if="col.name === 'name'">
                                    <div class="flrc" :style="{paddingLeft:`${scope.row.level*2}em`}">
                                        <span class="">{{scope.row.name}}</span>
                                        <span>
                                            <mu-button v-if="childCount[scope.row.id]>0" small icon @click="toggle(scope.row)"
                                                       :class="{'tree-open':!!scope.row.open,'tree-close':!scope.row.open,}">
                                                <mu-icon value="keyboard_arrow_right"></mu-icon>
                                            </mu-button>
                                        </span>
                                    </div>
                                </div>
                                <div :class="`ez-${col.align}`" v-if="col.name === 'group'">{{scope.row.group}}</div>
                                <div :class="`ez-${col.align}`" v-if="col.name === 'key'">{{scope.row.key}}</div>
                                <div :class="`ez-${col.align}`" v-if="col.name === '_actions'">
                                    <div>
                                        <mu-button color="primary" small icon @click="openEdit(scope.row.id)">
                                            <mu-icon value="edit"></mu-icon>
                                        </mu-button>
                                        <mu-button color="error" small icon @click="remove(scope.row.id)">
                                            <mu-icon value="remove_circle"></mu-icon>
                                        </mu-button>
                                    </div>
                                </div>
                            </td>
                        </template>
                    </mu-data-table>
                </div>
            </mu-paper>
        </div>
        <!--        modal start-->
        <mu-dialog :open="showForm" scrollable :padding="32" >
            <mu-appbar color="primary" :title="title + `信息修改`">
                <mu-button slot="left" icon @click="closeEdit">
                    <mu-icon value="edit"></mu-icon>
                </mu-button>
                <mu-button slot="right" flat @click="closeEdit">
                    保存
                </mu-button>
                <mu-button slot="right" flat @click="closeEdit">
                    退出
                </mu-button>
            </mu-appbar>
            <div v-if="showForm">
                <edit :model-id="id" :is-comp="true" :base="base" @done="closeEdit"></edit>
            </div>
        </mu-dialog>
    </div>
</template>

<script>
    import mixin_common from "./js/mixin_common";
    import mixin_config from "./js/mixin_config";
    import mixin_table from "./js/mixin_table";
    import mixin_list from "./js/mixin_list_tree";//树形有独立的mixin
    import mixin_search from "./js/mixin_search";
    import mixin_edit from "./js/mixin_edit";
    import Edit from "./edit";

    export default {
        name: "v1-auth-Role-tree",
        mixins: [
            mixin_common,
            mixin_config,
            mixin_edit,
            mixin_table,
            mixin_list,
            mixin_search,
        ],
        components: {Edit},
        data() {
            return {}
        },
        methods: {},
        mounted() {
            this.limit = 1000
        },
    }
</script>

<style scoped>
    .tree-close {
        transform: rotate(0deg);
        transition: transform .5s;
    }

    .tree-open {
        transform: rotate(90deg);
        transition: transform .5s;
    }


    .toggle-width {
        transition: width .3s;
    }

    .longger {
        width: 240px;
    }

    .short {
        width: 150px;
    }

    .setting {
        transition: width .3s;
        overflow: hidden;
    }

    .setting-close {
        width: 0;
    }

    .setting-open {
        width: 500px;
    }
</style>